<template>
  <div class="comment-management">
    <el-card shadow="never">
      <el-table :data="comments" style="width: 100%">
        <el-table-column prop="commentId" label="ID" width="80"></el-table-column>
        <el-table-column prop="contentId" label="内容ID" width="100"></el-table-column>
        <el-table-column label="评论内容">
          <template #default="{ row }">
            <div class="comment-text">{{ row.commentText }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="likeCount" label="点赞数" width="100"></el-table-column>
        <el-table-column prop="replyCount" label="回复数" width="100"></el-table-column>
        <el-table-column label="状态" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.status === 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="评论时间" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button 
              size="mini" 
              :type="row.status === 1 ? 'danger' : 'success'"
              @click="toggleStatus(row)"
            >
              {{ row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.commentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getComments, deleteComment, updateCommentStatus } from '@/api/comment';

export default {
  setup() {
    const comments = ref([]);
    console.log(comments);
    

    // 获取评论列表
    const fetchComments = async () => {
      const res = await getComments();
      console.log('评论列表:', res);
      
      comments.value = res.data.data;
    };

    // 删除评论
    const handleDelete = (id) => {
      ElMessageBox.confirm('确定要永久删除这条评论吗？', '警告', {
        type: 'warning'
      }).then(async () => {
        await deleteComment(id);
        ElMessage.success('评论删除成功');
        fetchComments();
      }).catch(() => {});
    };

    // 切换评论状态
    const toggleStatus = async (comment) => {
      const newStatus = comment.status === 1 ? 0 : 1;
      await updateCommentStatus(comment.commentId, newStatus);
      ElMessage.success('状态更新成功');
      fetchComments();
    };

    onMounted(() => {
      fetchComments();
    });

    return {
      comments,
      handleDelete,
      toggleStatus
    };
  }
};
</script>

<style scoped>
.comment-text {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>